<script setup>
import IconAward from "@/components/icons/IconAward.vue";

import { ref } from 'vue';

defineProps({
  courseId: {
    type: String,
    default: '0'
  }
})

const isQuality = ref(false);

</script>

<template>
  <div class="component">
    <div v-show="isQuality" class="label">
      <IconAward width="1.5em" height="1.5em"></IconAward>
      <span style="font-weight: bold">精选</span>
    </div>
    <el-image fit="fill"
              src="https://img0.baidu.com/it/u=1674210080,448958569&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"></el-image>

    <div class="detail-float">
      <div class="detail-float-left">
        播放量，，评分
      </div>
      <div class="detail-float-right">
        时长
      </div>
      <div style="clear: both"></div>
    </div>

    <div class="detail">
      <div class="title">
        视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题
      </div>
      <div class="author">课程作者xxxxx</div>
    </div>
  </div>
</template>

<style scoped>
.el-image {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  width: 100%;
  height: 100%;
}

.el-image:hover {
  cursor: pointer;
}

.label {
  margin-bottom: -2rem;
  margin-left: -0.2rem;
  width: 4.5rem;
  height: 2.2rem;
  border-top-left-radius: 1rem;
  background-color: var(--el-color-warning-light-7);
  z-index: 1024;
  display: flex;
  padding: 0.2rem;
}

.detail-float {
  margin-top: -2.2rem;
  height: 2rem;
  color: white;
  font-size: small;
  background-image: linear-gradient(transparent, black);
}

.detail-float-left {
  float: left;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}

.detail-float-right {
  float: right;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.detail {
  margin-top: 0.3rem;
  margin-right: 1rem;
}

.detail .title {
  font-weight: bold;
  font-size: large;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.detail .title:hover {
  color: var(--el-color-primary);
  cursor: pointer;
}

.detail .author {
  font-size: small;
  color: var(--el-text-color-secondary);
  cursor: pointer;
}

.detail .author:hover {
  color: var(--el-color-primary);
}
</style>